<template>
  <div class="app-container">
    <!-- 第一步，通过流程定义的列表，选择对应的流程 -->

    <div v-if="!selectProcessInstance">
      <el-row :gutter="12">
        <el-col :span="6" v-for="(item, index) in list" :key="item.id">
          <el-card class="box-card-one" shadow="hover">
            <div slot="header" class="clearfix" @click="handleSelect(item)">
              <span>
                <el-tag size="small" :type="color[index % 5]">{{ item.name }}</el-tag>
              </span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="handleSelect(item)"><el-tag>发起流程</el-tag></el-button>
            </div>
            <el-col :span="6" style="margin-bottom: 10px">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="40" :src="img[index % 5]"> </el-avatar>
                </div>
              </div>
            </el-col>

            <el-tag size="medium" style="margin-bottom: 7px">版本：v{{ item.version }}</el-tag>
            <br />
            <span style="color: #909399"> 描述：{{ item.description }} </span>
          </el-card>
        </el-col>
      </el-row>

      <!-- <el-table v-loading="loading" :data="list">
        <el-table-column label="流程名称" align="center" prop="name" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="handleBpmnDetail(scope.row)">
              <span>{{ scope.row.name }}</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="流程分类" align="center" prop="category" width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bpm_model_category" :value="scope.row.category" />
          </template>
        </el-table-column>
        <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
          <template slot-scope="scope">
            <el-tag size="medium" v-if="scope.row">v{{ scope.row.version }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="流程描述" align="center" prop="description" width="300" show-overflow-tooltip />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-plus" @click="handleSelect(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <!-- 第二步，填写表单，进行流程的提交 -->
    <div v-else>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
          <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">选择其它流程</el-button>
        </div>
        <el-col :span="20" :offset="2">
          <div>
            <parser :key="new Date().getTime()" :form-conf="detailForm" @submit="submitForm" />
          </div>
        </el-col>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">流程图</span>
        </div>
        <my-process-viewer key="designer" v-model="bpmnXML" v-bind="bpmnControlForm" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getProcessDefinitionBpmnXML, getProcessDefinitionList, getProcessDefinitionListPro } from '@/api/bpm/definition'
import { getInfo } from '@/api/login'
import { decodeFields } from '@/utils/formGenerator'
import Parser from '@/components/parser/Parser'
import { publicDelect, publicSubmit, getForm, publicFindById } from '@/api/bpm/form'
import { createProcessInstance, getMyProcessInstancePage } from '@/api/bpm/processInstance'

// 流程实例的发起
export default {
  name: 'ProcessInstanceCreate',
  dicts: ['bpm_model_category'],
  components: {
    Parser
  },
  data() {
    return {
      bpmModelCategory: [],
      color: ['info', 'success', '', 'warning', 'danger'],
      img: [
        'https://iconfont.alicdn.com/s/ca6e6f8a-445e-4491-a5bb-c9ed5298be3b_origin.svg',
        'https://iconfont.alicdn.com/t/ca6e6f8a-445e-4491-a5bb-c9ed5298be3b.png',
        'https://iconfont.alicdn.com/t/84f23edf-32f7-45b0-adfe-4c993114d4ee.png',
        'https://iconfont.alicdn.com/t/a572e6b9-a323-4a47-9886-2b5745df4373.png',
        'https://iconfont.alicdn.com/t/b58a2f96-925b-41a8-88ea-2ecbf2ee0099.png',
        'https://iconfont.alicdn.com/t/a40346aa-b8a6-4827-b5cd-fa851285d08d.png',
        'https://iconfont.alicdn.com/t/a79cb816-aef0-4401-98f0-4f5f7427fe73.png',
        'https://iconfont.alicdn.com/t/2311c0b8-2a2c-4ed6-a988-69883b91a431.png',
        'https://iconfont.alicdn.com/t/06ef3ee7-7269-46d3-818b-efdee738b6b0.png',
        'https://iconfont.alicdn.com/t/5bb9f817-18c2-41ea-b1cd-54bef4a6e8be.png',
        'https://iconfont.alicdn.com/t/ed2ecfa7-97e8-4bd0-be65-04adab7b044a.png',
        'https://iconfont.alicdn.com/t/be7f2c8f-05bd-40ba-931c-00707131bf4e.png'
      ],
      // 遮罩层
      loading: true,
      // 表格数据
      list: [],

      // 流程表单详情
      detailForm: {
        fields: []
      },

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: 'activiti'
      },

      // 流程表单
      selectProcessInstance: undefined // 选择的流程实例

      // 数据字典
      // categoryDictDatas: getDictDatas(DICT_TYPE.BPM_MODEL_CATEGORY)
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询流程定义列表 */
    getList() {
      this.loading = true
      getProcessDefinitionList({
        suspensionState: 1
      }).then((response) => {
        this.list = response.data
        this.loading = false
      })
    },
    /** 处理选择流程的按钮操作 **/
    handleSelect(row) {
      // 设置选择的流程
      this.selectProcessInstance = row

      // 流程表单
      if (row.formId) {
        // 设置对应的表单
        this.detailForm = {
          ...JSON.parse(row.formConf),
          fields: decodeFields(row.formFields)
        }

        // 加载流程图
        getProcessDefinitionBpmnXML(row.id).then((response) => {
          this.bpmnXML = response.msg
        })
      } else if (row.formCustomCreatePath) {
        this.$router.push({ path: row.formCustomCreatePath })
        // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
      }
    },
    /** 提交按钮 */
    submitForm(params) {
      if (!params) {
        return
      }
      // 设置表单禁用
      const conf = params.conf
      conf.disabled = true // 表单禁用
      conf.formBtns = false // 按钮隐藏

      // 提交表单，创建流程
      const variables = params.values
      getInfo().then((response) => {
        params.values = { ...params.values, ...{ createBy: response.user.userName } }
        publicSubmit('/Sleepfish/save', 'post', params).then((response) => {
          createProcessInstance({
            processDefinitionId: this.selectProcessInstance.id,
            variables: variables
          })
            .then((response) => {
              this.$modal.msgSuccess('发起流程成功')
              // 关闭当前窗口
              this.$tab.closeOpenPage()
              this.$router.go(-1)
            })
            .catch(() => {
              conf.disabled = false // 表单开启
              conf.formBtns = true // 按钮展示
            })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card-one {
  width: 300px;
  margin-bottom: 10px;
}
</style>
